<template>
  <MyDrawer ref="myRef" title="优惠活动" @submit="submit" :disabled="false" width="30%">
    <el-form ref="formRef" :model="drawerProps.row" label-width="120" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model="drawerProps.row.title"></el-input>
      </el-form-item>
      <el-form-item label="状态码">
        <el-input-number v-model="drawerProps.row.code" :min="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="弹框图片" prop="image">
        <ChooseFile v-model:url="drawerProps.row.cover"></ChooseFile>
      </el-form-item>
      <el-form-item label="弹框内容" prop="cont">
        <el-input type="textarea" maxlength="50" :autosize="false" v-model="drawerProps.row.cont" resize="none"></el-input>
      </el-form-item>
      <el-form-item label="按钮颜色" prop="button_color">
        <el-input v-model="drawerProps.row.button_color"></el-input>
      </el-form-item>
      <el-form-item label="按钮名称" prop="button_name">
        <el-input v-model="drawerProps.row.button_name"></el-input>
      </el-form-item>
      <el-form-item label="按钮logo"><ChooseFile v-model:url="drawerProps.row.button_logo"></ChooseFile></el-form-item>
      <el-form-item label="外部海报"><ChooseFile v-model:url="drawerProps.row.out_size_cover"></ChooseFile></el-form-item>
      <el-form-item label="按钮底部文字" prop="button_bottom_name"
        ><el-input v-model="drawerProps.row.button_bottom_name"></el-input
      ></el-form-item>
      <el-form-item label="成功按钮" prop="success_button">
        <el-input v-model="drawerProps.row.success_button"></el-input>
      </el-form-item>
      <el-form-item label="弹框">
        <div class="w-1/1 rounded-[15px] overflow-hidden pb-[20px]">
          <div class="w-1/1">
            <el-image class="w-1/1" style="aspect-ratio: 2/1" :src="url(prefix, drawerProps.row.cover)"></el-image>
          </div>
          <div class="p-15px box-border">
            <p class="text-18px font-semibold">{{ drawerProps.row.title }}</p>
            <div style="line-height: 16px" class="mt-10px">
              <span style="line-height: 16px">{{ drawerProps.row.cont }}</span>
            </div>
          </div>
          <div class="text-center rounded-[4px] text-[#fff] py-[5px]" :style="{ background: drawerProps.row.button_color }">
            {{ drawerProps.row.button_name }}
          </div>
        </div>
      </el-form-item>
    </el-form>
  </MyDrawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MyDrawer from "@/components/MyDrawer/index.vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useRoute } from "vue-router";
import ChooseFile from "@/components/ChooseFile/index.vue";
import { useUserStore } from "@/stores/modules/user";
import { url } from "@/utils/index";
const {
  userInfo: { prefix }
} = useUserStore();

const route = useRoute();

const myRef = ref<InstanceType<typeof MyDrawer> | null>();

interface DrawerProps {
  row: any;
  api?: (params: any) => Promise<any>;
  getTable?: () => Promise<any>;
}

const initData: any = {
  title: "",
  cont: "",
  cover: "",
  code: 1,
  button_name: "立即订阅",
  button_color: "var(--unnamed, linear-gradient(252deg, #55AFFC 0%, #5E89EF 100%))",
  button_logo: "",
  button_bottom_name: "",
  out_size_cover: ""
};

const rules: FormRules = {
  title: [
    { required: true, message: "活动名称不可为空", trigger: "blur" },
    { min: 1, max: 10, trigger: "blur", message: "字数1-10个字之间" }
  ],
  cover: [{ required: true, message: "图片地址不可为空", trigger: "blur" }],
  cont: [{ max: 50, min: 10, message: "字数必须为10-50个字", trigger: "blur" }],
  button_name: [{ max: 10, min: 1, message: "字数必须为1-10个字", trigger: "blur" }],
  button_color: [{ max: 500, min: 10, message: "字数必须为10-500个字", trigger: "blur" }],
  button_bottom_name: [{ max: 10, min: 1, message: "字数必须为1-10个字", trigger: "blur" }],
  success_button: [
    { required: true, message: "报名副词", trigger: "blur" },
    { max: 6, min: 1, message: "字数必须为1-6个字", trigger: "blur" }
  ]
};

const drawerProps = ref<DrawerProps>({
  row: JSON.parse(JSON.stringify(initData))
});

const acceptParams = (params: any) => {
  drawerProps.value = params;
  if (!params.row) {
    drawerProps.value.row = JSON.parse(JSON.stringify(initData));
  }
  myRef.value?.acceptParams();
};

const formRef = ref<FormInstance>();

const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate(async valid => {
    if (valid) {
      drawerProps.value.row.louPanId = parseInt(route.query.id as string);
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success("成功");
      await drawerProps.value.getTable!();
      myRef.value?.close();
    }
  });
};

defineExpose({
  acceptParams
});
</script>

<style></style>
